import { HU_METHOD, ROUND_RESULT } from '@/configs/game.config';
import { MULTIPLE_OPTIONS, SIGN_NUM_OPTIONS } from '@/configs/options.config';
import { AppContext } from '@/store/index.context';
import { RoundInfo } from '@/types/game';
import { getOptionLabel } from '@/utils/form.util';
import React, { useCallback, useContext, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import TextButton from '../../../../components/TextButton';
import classes from './index.module.css';
import classnames from 'classnames';
import { times } from 'lodash';

export default function RoundResult({
  roundInfo,
  positionPersonIds,
}: {
  roundInfo: RoundInfo;
  positionPersonIds: string[];
}) {
  const { personStore, gameStore, messageStore } = useContext(AppContext);
  const { getPersonsByIds, getPersonById } = personStore;
  const { removeRound } = gameStore;
  const navigate = useNavigate();
  const sceneIcons = useMemo(
    () => ({
      东: 'icon-dongfeng',
      南: 'icon-nanfeng',
      西: 'icon-xifeng',
      北: 'icon-beifeng',
    }),
    [],
  );

  const {
    scene,
    sceneNum,
    courtNum,
    reachPersonIds,
    roundResult,
    huPersonId,
    huMethod,
    multiple,
    signNum,
    tingPersonIds,
    triggerPersonId,
    changePoints,
  } = roundInfo;

  const positionPersons = useMemo(
    () => getPersonsByIds(positionPersonIds),
    [positionPersonIds, getPersonsByIds],
  );

  const reachPersonNames = useMemo(
    () =>
      getPersonsByIds(reachPersonIds)
        .map(p => p?.name)
        .join('、'),
    [reachPersonIds, getPersonsByIds],
  );

  const tingPersonNames = useMemo(
    () =>
      getPersonsByIds(tingPersonIds)
        .map(p => p?.name)
        .join('、'),
    [tingPersonIds, getPersonsByIds],
  );

  const huPerson = useMemo(
    () => getPersonById(huPersonId),
    [getPersonById, huPersonId],
  );

  const huMethodText = useMemo(() => {
    if (huMethod != null) {
      return {
        [HU_METHOD.RONG]: '荣和',
        [HU_METHOD.ZIMO]: '自摸',
      }[huMethod];
    }
    return '';
  }, [huMethod]);

  const triggerPerson = useMemo(
    () => getPersonById(triggerPersonId),
    [getPersonById, triggerPersonId],
  );

  const handleEdit = useCallback(() => {
    navigate(`/round?roundId=${roundInfo.roundId}`);
  }, [navigate, roundInfo]);

  const handleDel = useCallback(() => {
    messageStore.confirm('确定删除吗?', () => {
      removeRound(roundInfo.roundId);
    });
  }, [removeRound, roundInfo, messageStore]);

  return (
    <div className={classes.RoundResult}>
      <span
        className={classnames(
          'iconfont',
          classes.SceneIcon,
          sceneIcons[scene!],
        )}></span>
      <div className={classes.SceneText}>
        {scene}
        {sceneNum}局{!!courtNum && <>{roundInfo.courtNum}本场</>}
      </div>
      {reachPersonNames && (
        <div className={classes.ReachNames}>
          <span className={classes.RowTitle}>立直：</span>
          <span className={classes.RowContent}>{reachPersonNames}</span>
        </div>
      )}
      {/* 和局信息 */}
      {roundResult === ROUND_RESULT.HU && (
        <div className={classes.ReachNames}>
          <span className={classes.RowTitle}>结局：</span>
          <span className={classes.RowContent}>
            {huPerson?.name}
            {huMethodText}，{getOptionLabel(MULTIPLE_OPTIONS, multiple)}
            {getOptionLabel(SIGN_NUM_OPTIONS, signNum)}符
            {triggerPerson && <>，{triggerPerson.name}放铳</>}
          </span>
        </div>
      )}
      {/* 流局信息 */}
      {roundResult === ROUND_RESULT.NO_HU && (
        <div className={classes.ReachNames}>
          <span className={classes.RowTitle}>流局听牌：</span>
          <span className={classes.RowContent}>{tingPersonNames}</span>
        </div>
      )}
      <ul className={classes.PointChanges}>
        {!!changePoints[0] && <li>本局残余供托：{changePoints[0]}</li>}
        {times(4, num => (
          <li key={num}>
            {num + 1 === sceneNum ? (
              <span className="iconfont icon-zhuangjia"></span>
            ) : (
              ''
            )}
            &nbsp;
            {positionPersons[num]?.name}：{changePoints[num + 1]}
          </li>
        ))}
      </ul>
      <div className={classes.OpeartionButtons}>
        <TextButton onClick={handleEdit}>编辑</TextButton>
        <TextButton onClick={handleDel}>删除</TextButton>
      </div>
    </div>
  );
}
